<template>
    <n-form ref="formRef" :model="formData" :label-width="130" :rules="rules" label-placement="left">

        <n-form-item label="任务名称" path="jobName">
            <n-input v-model:value="formData.jobName" clearable />
        </n-form-item>
        <n-form-item label="调用目标字符串" path="invokeTarget">
            <n-input v-model:value="formData.invokeTarget" clearable />
        </n-form-item>

        <n-form-item label="cron执行表达式" path="cronExpression">
            <n-input v-model:value="formData.cronExpression" clearable />
        </n-form-item>
        <n-form-item label="状态" path="status">
            <n-radio-group v-model:value="formData.status">
                <n-space>
                    <n-radio label="启用" :value="StatusEnum.READY" />
                    <n-radio label="禁用" :value="StatusEnum.STOP" />
                </n-space>
            </n-radio-group>
        </n-form-item>



    </n-form>
    <n-space justify="center">
        <n-button @click="handleSubmitForm">确定</n-button>
        <n-button @click="handleCloseModal">取消</n-button>
    </n-space>
</template>

<script  setup lang='ts' >
import { FormInst } from 'naive-ui';
import { ref, toRefs } from 'vue';
import { fetchAddJob, fetchUpdateJob } from '@/service/api/sys/job'
import { SysJob,StatusEnum } from "./index"
import { FlatResponseData } from '~/packages/axios/src/type';


interface DataSource extends SysJob { }
type Props = {
    formData: DataSource
}
const props = defineProps<Props>()
const formRef = ref<FormInst | null>(null)
const { formData } = toRefs(props)
const rules = {
    jobName:{
        required: true, message: "任务名称不能为空", trigger: "blur"
    },
    invokeTarget: [
        { required: true, message: "调用目标不能为空", trigger: "blur" }
    ],
    cronExpression:{
        required: true, message: "定时规则不能为空", trigger: "blur"
    }
}

const emit = defineEmits(["list", "close"])

function handleCloseModal() {
    emit("close")
}
function handleFetchResult(res: FlatResponseData<any, App.Service.Response<unknown>>) {
    if (!res.error) {
        window.$message?.success("操作成功！")
        handleCloseModal()
        emit("list")
    }
}
function handleSubmitForm() {
    formRef.value?.validate(e => {
        if (!e) {
            const value = formData.value
            if (value.jobId) {
                fetchUpdateJob(formData.value).then(handleFetchResult)
            } else {
                fetchAddJob(formData.value).then(handleFetchResult)
            }
        }
    })
}

</script>

<style lang='scss' scoped>
</style>
